<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`补卡申请`" :autoBack="true" leftIconColor="$uni-text-color"
    :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
    <view class="container"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/class_bg.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <view class="classDate">
        <!-- 日打卡 -->
        <s-calendar :dotList="dotList" class="date" @selected-change="changeDay"></s-calendar>

      </view>
      <!-- 打卡记录 -->
      <scroll-view scroll-y class="comprehensive" v-if="stepList.length">
        <view class="att_cont">
          <view class="state">
            <s-attendance-state :stepList="stepList" :dates="dates" :status="1"></s-attendance-state>
            <!--补卡信息-->
            <uni-forms ref="relRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind"
              labelWidth="120">
              <uni-forms-item name="type" label="补卡类型" required>
                <uni-easyinput @tap="chooseType" :disabled="true" placeholder="请选择补卡" v-model="state.formData.type"
                  :inputBorder="false">
                </uni-easyinput>
              </uni-forms-item>
              <uni-forms-item name="start_time" label="补卡时间：" required>
                <view class="dates" @tap="chooseDate">
                  <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon01.png`" mode="scaleToFill" />
                  <view :class="state.formData.start_time ? 'gray' : 'placeholder'">{{ state.formData.start_time
    ? state.formData.start_time : '请选择开始日期' }}</view>
                </view>
              </uni-forms-item>
              <uni-forms-item name="content" label="补卡理由" required class="flex">
                <view class="flex-vertical">
                  <uni-easyinput type="textarea" v-model="state.formData.content" placeholder="请输入补卡理由"></uni-easyinput>
                </view>
              </uni-forms-item>

            </uni-forms>
            <button @tap="submitForm" class="button">{{ text }}</button>
          </view>

        </view>
        <!-- 底部提交按钮 -->

      </scroll-view>
      <up-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></up-empty>
    </view>

  </s-layout>
  <!---选择类型-->
  <up-action-sheet :show="showStatus" :actions="showStatusActions" title="请选择状态" @close="showStatus = false"
    @select="statusSelect" :round="18" :closeOnClickAction="true"></up-action-sheet>

  <!-- 选择日期-->
  <up-calendar 
  :monthNum="state.monthNum"
  :minDate="state.minDate"
  :maxDate="state.maxDate"
  :closeOnClickOverlay="true" 
  :show="DateShow" :mode="mode" @confirm="Confirm"
    @close="DateClose"></up-calendar>
</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
const { safeAreaInsets } = uni.getSystemInfoSync();
import { type, start_time, content } from '@/sheep/validate/form';
const text = ref('提交')
onLoad((options) => {
  let params = {
    date: new Date().toISOString().slice(0, 10),
  };
  getdayList(params)
})
const state = reactive({
  minDate:'',
  maxDate:'',
  monthNum:'13',

  formData: {
    type: '',
    start_time: '',
    content: '',
  },
  rules: {
    type,
    start_time,
    content
  },
});
// 设置默认日期，最大值为今天，最小值为去年今天
// const chooseTimed = ()=> {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month <= 9) {
        month = '0' + month;
      }
      if (day <= 9) {
        day = '0' + day;
      }
      let minyear = year - 1;
      state.minDate = year + '-' + '01' + '-' + '01';
      state.maxDate = year + '-' + month + '-' + (day + 1);
      // state.defaultDate = year + '-' + month + '-' + day;
    // }
// 获取状态
let dotList = ref([])
const stepList = ref([])
const dates = ref(-1)
const getdayList = (params) => {
  sheep.$api.attendance_record.getAttendanceDay(params).then((res) => {
    stepList.value = res?.data

    if (stepList.value) {
      stepList.value.forEach((i) => {
        if (i.date) {
          dates.value++
        }
        if (i.status) {
          if (i.status == 1 || i.status == 4) {
            i.clockStatus = '打卡正常'
          }
          if (i.status == 2 || i.status == 3) {
            i.clockStatus = '打卡异常'
          }
        } else {
          i.clockStatus = '打卡异常'
        }
      })
    }


  })
}
//改变日历记录
let datatime = ref()
function changeDay(e) {
  datatime.value = e.fullDate
  let params = {
    date: e.fullDate

  };
  dates.value = -1
  // stepList.value=[]
  getdayList(params);

}
//补卡类型
//选择类型
const chooseType = () => {
  showStatus.value = true
}
const showStatus = ref(false)
const showStatusActions = ref([
  { name: '上班补卡', type: 1 },
  { name: '下班补卡', type: 2 },
])
// 定义方法  状态
const is_entry = ref()
function statusSelect(e) {
  is_entry.value = e.type
  state.formData.type = e.name
  showStatus.value = false

}
// 补卡时间
//日期--------------
const DateShow = ref(false)
const dateid = ref()
const chooseDate = (e) => {
  dateid.value = e
  DateShow.value = true
}
const DateClose = () => {
  DateShow.value = false
}
const Confirm = (e) => {
  state.formData.start_time = `${e}`
  DateShow.value = false

}
// 提交补卡
const relRef = ref();
const submitForm = async () => {
  const validate = await unref(relRef)
    .validate()
    .catch((error) => {
    });
  if (!validate) return;
  uni.$u.throttle(() => {
  let parpam={
        type: is_entry.value,
        date: state.formData.start_time,
        remark: state.formData.content,
        is_makeup_card:'1'
    }

    sheep.$api.attendance_record.postClockin(parpam).then((res) => {
      if (res.code == 1) {
          sheep.$helper.toast(res.msg);
          setTimeout(() => {
            let parpam ={
              date:state.formData.start_time,
            }
            sheep.$router.back()
            getdayList(parpam)
          }, 500)
      } else {
          sheep.$helper.toast(res.msg);
      }
    })
  },1000)

}
</script>

<style scoped lang="scss">
@import '../compentns/public.scss';
@import '../compentns/up_sheet.scss';

page {
  width: 100%;
  height: 100%;
}

// 背景图片盒子
.container {
  background-size: 100% 40%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

:deep(.u-icon__icon) {
  background: $uni-bg-color;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;

}

/*日历*/
.classDate {
  width: 710rpx;
  margin: 80rpx auto 30rpx auto;
  border-radius: 16rpx;
  background-color: $uni-bg-color;
  box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 5;

  &:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: -33rpx;
    left: 30rpx;
    width: 638rpx;
    height: 20rpx;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;
    background-color: #D9D9D9;

  }

  &:after {
    content: "";
    z-index: 1;
    position: absolute;
    top: -20rpx;
    left: 10rpx;
    width: 678rpx;
    height: 20rpx;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    background-color: #F1F1F1;

  }

  .date {
    width: 100%;
    border-radius: 16rpx;
  }

  .hint {
    background: #F4F7FF;
    height: 96rpx;
    border-radius: 0 0 16rpx 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC;
   font-size:$uni-font-size-26;
    color: $uni-color-primary;

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
    }
  }

}

// 滚动
.comprehensive {
  width: calc(100% - 40rpx);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 20rpx;
  height: 67vh;
}

.att_cont {
  width: 100%;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  padding-bottom: 30rpx;

  .state {
    margin: 0 30rpx !important;
  }
}

:deep(.is-disabled) {
  .uni-easyinput__placeholder-class {
    color: $uni-color-primary !important;
    text-align: right;
  }

}

//日期
.dates {
  text-align: right;
  border: #1241E2 1rpx solid;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16rpx;
  height: 64rpx;
  margin: 15rpx 0 0 200rpx;

  image {
    width: 28rpx;
    height: 26rpx;
    margin-right: 10rpx;
  }

  .placeholder {
    color: $uni-color-primary;
    font-weight: 500;
   font-size:$uni-font-size-26;
  }

  .gray {
    color: #999;
    font-weight: 500;
   font-size:$uni-font-size-26;
  }
}

:deep(.uni-forms) {
  .uni-forms-item.is-direction-left {
    &:nth-last-child(1) {
      .uni-forms-item__label {
        background: $uni-bg-color;
        margin-top: -10rpx;
      }

      flex-direction: column !important;
      height: auto;
    }

  }
}

.button {
  width: 90%;
  margin-bottom: 50rpx;
  background-color: #ffffff;
  height: 90rpx;
  border-radius: 50rpx;
  font-family: PingFangSC;
  color: #FFFFFF;
  font-weight: $uni-font-weight;
  font-size: 34rpx;
  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
}
</style>